<template>
  <div>
    <a-card>
      <div>
        <a-space class="operator">
          <a-upload name="file" action="http://localhost:3002/api/v1/common/carousels" :showUploadList="false"
            @change="handleChange">
            <a-button>
              新增轮播图
            </a-button>
          </a-upload>
        </a-space>
        <standard-table :columns="columns" :dataSource="dataSource" :selectedRows.sync="selectedRows" @change="onChange"
          :pagination="{ ...pagination, onChange: onPageChange }" @selectedRowChange="onSelectChange">
          <div slot="description" slot-scope="{text}">
            {{ text }}
          </div>

          <template v-slot:img="{ text }">
            <a-popover>
              <template slot="content">
                <img :src="text" style="max-width: 200px; max-height: 200px;" />
              </template>
              <img :src="text" style="width: 50px; height: 50px; cursor: pointer;" />
            </a-popover>
          </template>

          <div slot="action" slot-scope="{text, record}">
            <a @click="del(record)">
              <a-icon type="delete" />删除
            </a>
          </div>
          <template slot="statusTitle">
            <a-icon @click.native="onStatusTitleClick" type="info-circle" />
          </template>
        </standard-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import { request } from '@/utils/request'
import moment from 'moment';
const columns = [
  {
    title: '编号',
    dataIndex: 'key'
  },
  {
    title: '图片',
    dataIndex: 'img_path',
    key: 'img',
    scopedSlots: { customRender: 'img' },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    sorter: true,
    customRender: (text) => {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: { StandardTable },
  data() {
    return {
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.pagination.pageSize = pageSize
      this.getData()
    },
    getData() {
      request(process.env.VUE_APP_API_BASE_URL1 + '/common/carousels', 'get', {
      }).then(res => {
        const list = res.data.data
        let dataSource = []
        if (list) {
          list.forEach(item => {
            item['key'] = item.id
            dataSource.push(item)
          });
          this.$message.success('查询信息成功')
        }
        this.dataSource = dataSource
      })
    },
    handleChange(info) {
      if (info.fileList.length > 0) {
        this.getData()
      }
    },
    info(key) {
      console.log(key);
    },
    del(record) {
      request(process.env.VUE_APP_API_BASE_URL1 + '/common/carousels/' + record.id, 'delete', {
      }).then(res => {
        if (res.data.code == 200) {
          this.getData()
        }
      })
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange(e) {
      console.log('e :>> ', e);
      // this.$message.info('表格状态改变了')
    },
    onSelectChange() {
      // this.$message.info('选中行改变了')
    },
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
